<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>介绍</title>
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/introduce.css" />
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="css/swiper.min.css">

		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 100%;
				height: 100%;
			}

			.swiper-slide {
				background-position: center;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- header -->
			<header>

			</header>

			<!-- main -->
			<main>
				<!-- Swiper -->
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="main1" style="background: url(img/intro1.jpg) no-repeat center/contain;">
								<h2>艺术百科</h2>	
						
							</div>
							

						</div>
						<div class="swiper-slide">
							<div class="main1" style="background: url(img/intro2.jpg) no-repeat center/contain;">
								
								<h2>艺术史</h2>
							</div>
						</div>
						<div class="swiper-slide aa">
							<div class="main1" style="background: url(img/intro3.jpg) no-repeat center/contain;">
								
								<h2>每天听见</h2>
								
							</div>
							<h2>西方传世名画的故事</h2>
							<a href="index-rec.html">立即体验</a>
						</div>


					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination swiper-pagination-black"></div>
					<!-- Add Arrows -->
					<div class="swiper-button-next swiper-button-white"></div>
					<div class="swiper-button-prev swiper-button-white"></div>
				</div>
			</main>

			<!-- Swiper JS -->
			<script src="js/swiper.min.js"></script>

			<!-- Initialize Swiper -->
			<script>
				var swiper = new Swiper('.swiper-container', {
					spaceBetween: 30,
					effect: 'fade',
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
				});
			</script>
	</body>
</html>
